<template>
	<view class="big-box flex-col align-center">
		<!-- #ifdef APP-PLUS -->
		<u-sticky>
		<!-- #endif -->
			<top-navigation bgColor='#16161e' :isBack="true" isFix isShow>
				<view slot='right-slot' class=" justify-start">
					<image @tap="clearMsg" class="clear-icon" src="/static/images/mine/clear.png" mode=""></image>
				</view>
			</top-navigation>
			<u-toast ref="uToast"></u-toast>

			<!-- 我的baby -->
			<view class="no-data-box flex-col justify-center align-center" v-if="!oreList.length">
				<image class="no-data" src="/static/images/no-datapng.png" mode=""></image>
				暂无数据

			</view>
			<!-- #ifndef APP-PLUS -->
			<u-sticky>
			<!-- #endif -->
				<view class="tabs justify-between">
					<!-- <u-tabs lineWidth="36rpx" lineColor="#FFFFFF00" :scrollable=false :current="checked" :activeStyle="{
			            color: '#FFFFFF',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
						 fontWeight: 'bold',
					            color: '#FFFFFF99',
					            transform: 'scale(1)'
					        }" itemStyle="height: 44px;" :list="list1" @click="toggle"></u-tabs> -->
					<view class="u-tabs justify-start align-center">
						<view @click="toggle(index)" class="DINPro-Bold u-tabs-item"
							:class="checked==index?'select-tab':''" v-for="(item,index) in list1" :key="index">
							<view class="dot" v-if="item.new == 1">

							</view>
							{{item.name}}
						</view>
					</view>

				</view>
				<!-- <view v-if="checked!=2" class="time-select-box justify-start align-center" @click="pickerShow = true">
			<view class="time-select justify-start align-center">
				<view class="uni-input">{{comPickerValue}}
					<image class="jiantou" src="/static/images/mine/jiantou.svg" mode=""></image>
				</view>
			</view>

		</view> -->
				<view class="" style="height: 40rpx;">

				</view>
			</u-sticky>
			<view class="content">
				<view class="flex-col justify-center" v-for="v,k in oreList" :key="k">
					<view class="now-time">
						2023-12-04 15:53:17
					</view>
					<view class="content-box" @tap="$navto('/pages/msg/msgDetail?id='+v.id)">
						<view class="title-time">

							<view class="justify-between">
								<view class="title DINPro-Bold">
									{{v.title}}
									<view class="title-dot"  v-if="v.new == 1">

									</view>
								</view>
								<view class="num DINPro-Bold">
									<image class="jiantou" src="/static/images/mine/jiantou.svg" mode=""></image>
								</view>
							</view>
							<view class="time u-line-2">
								{{v.desc}}
								<!-- 更新app! -->
							</view>
						</view>

					</view>
				</view>

			</view>
			<u-datetime-picker :show="pickerShow" v-model="pickerValue" mode="date" @confirm='pickerConfirm'
				closeOnClickOverlay @cancel="pickerShow = false"></u-datetime-picker>
			<!-- 联系客服弹出层-->
			<u-popup :show="clearShow" mode="center" @close="clearShow=false" round="16rpx" bgColor='transparent'
				overlayOpacity='0.7'>
				<view class="popup-one-box flex-col align-center">

					<view class="has-shuijing justify-center">
						是否全部已读?
					</view>
					<view class=" justify-between">
						<view class="popup-box-btn align-center justify-center" @click="clearShow=false">
							取消
						</view>
						<view class="popup-box-btn-1 align-center justify-center" @click="clearReq">
							清除
						</view>
					</view>


				</view>
			</u-popup>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				pickerValue: Number(new Date()),
				comPickerValue: this.$moment().format('YYYY-MM-DD'),
				pickerShow: false,
				current: 0,
				moneyShow: false,
				realName: false, //是否实名
				checked: 0,
				actionStyle: {
					color: "#56A796",
					fontSize: "28rpx",
					fontWeight: "bold",
					marginRight: "25rpx"
				},
				oreList: [],
				list1: [{
					name: '系统通知',
				}, {
					name: '运营通知',
					badge: {
						isDot: true
					}
				}],

				appList: [

				],
				clearShow: false,


			}
		},
		onShow() {
			this.getCardInfo()
		},
		methods: {
			// 清理消息
			clearMsg() {
				this.clearShow = true
			},
			async clearReq() {
				let url = '/api/v1/message_clear'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url)
				if (code == 200) {
					this.getCardInfo()
					console.log(data, '静态资源');
				this.$refs.uToast.show({
					message: msg
				})
				this.clearShow = false
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
			},
			// 列表
			async getCardInfo() {
				let url = '/api/v1/message_list'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url, {
					category_id: this.checked + 1,
				})
				if (code == 200) {
					console.log(data, '静态资源');
					this.list1 = data.category
					this.oreList = data.list || []
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
				this.pickerShow = false
			},
			pickerConfirm(e) {
				console.log(this.$moment(e.value).format('YYYY-MM-DD'));

				this.comPickerValue = this.$moment(Number(e.value)).format('YYYY-MM-DD')
				this.getCardInfo()
			},
			toggle(item) {
				this.checked = item
				this.getCardInfo()
			},
			signOut() {
				uni.clearStorageSync('token')
				this.$navto('/pages/login/app-login', false, 3)
			},
			myCopy(value) {
				let _this = this
				//提示模板
				uni.setClipboardData({
					data: value, //要被复制的内容
					showToast: false,
					success: () => { //复制成功的回调函数
						_this.$refs.uToast.show({
							message: '已复制',
							type: 'default',
							duration: '500'

						})
						// uni.showToast({ //提示
						// 	title: wxorqq == 'w' ? "微信号已复制" : 'QQ号已复制'
						// })
					}
				});
			},
			setCategory(value) {
				switch (value) {
					case 1:
						// 支付密码
						if (this.realName) {

						} else {
							this.moneyShow = true
						}
						break;
					default:
						break;
				}
			},
			bannerChange() {
				// banner改变
			},
			featureTap(e) {
				this.moneyShow = true
			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		background: #16161e;
		padding: 0 32rpx 60rpx;
		min-height: 100vh;

		.content {
			width: 100%;
			color: #FFF;

			.now-time {
				font-size: 22rpx;
				color: rgba(255, 255, 255, .3);
				text-align: center;
				margin-bottom: 20rpx;
			}

			.content-box {
				background-color: #20202c;
				margin-bottom: 40rpx;
				padding: 40rpx 30rpx 50rpx 40rpx;
				border-radius: 16rpx;

				.jiantou {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.title {
				font-size: 28rpx;
				font-weight: 700;
				margin-bottom: 23rpx;
				position: relative;
				.title-dot {
					position: absolute;
					width: 10rpx;
					height: 10rpx;
					top: 0;
					right: -16rpx;
					background: red;
					border-radius: 50%;
				}
			}

			.time {
				margin-right: 30rpx;
				line-height: 1.5;
				color: rgba(255, 255, 255, .4);
				font-size: .75rem;
			}
		}

		.no-data-box {

			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -40%);
			color: #FFFFFFCC;
			font-size: 28rpx;

			.btn {
				margin-top: 60rpx;
				right: 0;
				height: 90rpx;
				width: 400rpx;
				border-radius: 8rpx;
				bottom: 120rpx;
				font-weight: 700;
				font-size: 30rpx;
				background: #20202c;
				color: #fff;
			}

			.no-data {
				width: 220rpx;
				height: 220rpx;
				margin-bottom: 30rpx;
			}

		}

		.clear-icon {
			width: 40rpx;
			height: 40rpx;
		}

		.time-select-box {
			padding: 0 32rpx 0;
			width: 100%;
			background: #16161e;
		}

		.time-select {
			margin: 1rem 0;
			min-width: 6.0625rem;
			height: 1.875rem;
			font-size: .8125rem;
			color: rgba(255, 255, 255, .8);
			background: #20202C;
			border-radius: .25rem;
			padding: .375rem .4375rem;

			.jiantou {
				width: 24rpx;
				height: 24rpx;
				transform: rotate(90deg);
				margin-left: 15rpx;
			}
		}

		.tabs {
			padding: 40rpx;
			width: 100vw;
			height: 88rpx;
			background: #16161e;
			color: rgba(255, 255, 255, .5);
			box-sizing: border-box;

			.u-tabs {
				// border: 2rpx solid red;
				font-size: 28rpx;
				transition: all .3s;

				.u-tabs-item {
					position: relative;
					margin-right: 100rpx;

					.dot {
						position: absolute;
						width: 10rpx;
						height: 10rpx;
						top: 0;
						right: -16rpx;
						background: red;
						border-radius: 50%;
					}
				}
			}

			.select-tab {
				font-size: 32rpx;
				color: #FFF;
				transition: all .3s;
			}

		}



	}

	.popup-one-box {
		position: relative;
		z-index: 7;
		width: 560rpx;
		border-radius: 16rpx;
		background: #1D1D1D;
		padding: 48rpx 40rpx;

		.has-shuijing {
			width: 100%;
			height: 44rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-bottom: 48rpx;
		}

		.shui-ji-num {
			font-size: 28rpx;
			color: #FFF;
			font-weight: 700;
		}

		.popup-box-btn {
			width: 227rpx;
			height: 72rpx;
			background: #252727;
			color: rgba(255, 255, 255, .4);
			font-size: 28rpx;
			border-radius: 8rpx;
		}

		.popup-box-btn-1 {
			width: 227rpx;
			height: 72rpx;
			background: #27FF92;
			color: #000;
			font-size: 28rpx;
			margin-left: 24rpx;
			border-radius: 8rpx;
		}




		.popup-kuangshi {
			width: 56rpx;
			height: 36rpx;
		}







	}
</style>